<template>
  <div class="song-res">
		<div class="result">
			<h3>
				搜索<span>{{ keywords }}</span
				>,找到{{ songCount }}首单曲
			</h3>
		
        <!-- 最佳匹配 -->
        <div class="match">
            <h3>最佳匹配</h3>        
            <div class="goodMatch">
                 <!-- 歌手 -->
                <div class="matchitem" v-if="Object.keys(matchSinger).length !== 0">
                    <div class="cover">
                        <img v-lazy="matchSinger.picUrl" alt=""/>
                    </div>
                    <div class="iname" @click="toSingerDetail">
                        <span>歌手：{{matchSinger.name}}</span>
                        <span class="iconfont icon-xiayiye"></span>
                    </div>
                </div>
                <!-- 专辑 -->
                <div class="matchitem" v-if="Object.keys(matchAlbum).length !== 0" @click="toAlbumDetail">
                    <div class="cover">
                        <img v-lazy="matchAlbum.picUrl" alt=""/>
                    </div>
                    <div class="iname">
                        <span>专辑：{{matchAlbum.name}}</span>
                        <span class="iconfont icon-xiayiye"></span>
                    </div>
                </div>
            </div>    
            </div>        
        </div>
        <SongTable :songs="songs"/>
        <!-- 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
         -->
        <div class="pageinatin">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[30, 50, 100]"
                :page-size="pageSize"
                layout="prev, pager, next, jumper,total,sizes"
                :total="songCount">
            </el-pagination>
        </div>
	</div>
</template>
<script>
import SongTable from "@/components/content/SongTable.vue";
export default {
    name: "",
    components: { SongTable },
    data() {
        return {
            keywords: "",
            songCount: 0,
            // 歌曲数组
            songs:[],
            // 每一页展示的条数
            pageSize:30,
            // 当前页数
            currentPage:1,
            // 页面偏移量
            offset:0,
            // 最佳匹配歌手
            matchSinger:{},
            // 最佳匹配专辑
            matchAlbum:{}
        };
    },
    methods: {
        async getSearchSongDetail(){
             let resSongs = await this.$API.searchdetail.getSearchSong(this.keywords,this.offset,this.pageSize);
            if(resSongs.code == 200){
                this.songs = resSongs.result.songs
                this.songCount = resSongs.result.songCount
            }
        },
        // 切换页数回调
        handleCurrentChange(page){
          this.offset = (page - 1) * this.pageSize;
          this.getSearchSongDetail();
        },
        // 改变每一页展示条数事件回调
        handleSizeChange(limit){
            this.currentPage = 1;
            this.offset = (this.currentPage - 1) * this.pageSize;   
            this.pageSize = limit
            this.getSearchSongDetail();
        },
        // 获取最佳匹配结果
        async getGoodMatch(){
            let matchMedia =  await this.$API.searchdetail.getGoodMatch(this.keywords);
            console.log(matchMedia)
            if(matchMedia.code == 200){
                this.matchSinger = matchMedia.result.artist[0];
                this.matchAlbum = matchMedia.result.album[0];
            }
        },
        // 去专辑详情页
        toAlbumDetail(){
            this.$router.push("/albumdetail/" + this.matchAlbum.id)
        },
        // 去歌手详情页
        toSingerDetail(){
            this.$router.push("/singerdetail/" + this.matchSinger.id)
        }
    },
    created() {
        this.keywords = this.$route.params.keywords;
        // 搜索歌曲列表信息
        this.getSearchSongDetail();
        // 搜索最佳匹配结构
        this.getGoodMatch();
    },
  
};
</script>
<style lang="less" scoped>
.result {
  h3 {
    margin-left: 10px;
    margin-top: 10px;
  } 
}
.match{
    width: 100%;
    margin: 10px 10px;
    .goodMatch{
        display: flex;
        width: 100%;
        margin-top: 15px;
        cursor: pointer;
        .matchitem{
            display: flex;
            width: 20%;
            margin-right: 30px;
             border: 1px solid beige;
            
            .cover{
                img{
                    width: 80px;
                    height: 80px;
                }
            }
            .iname{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f5f5f5 ;
                 &:hover {
			        font-weight: 700;
		        }
            }
        }
    }
  }
.pageinatin{
    text-align: center;  
}
</style>